<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Home</title>

    <!-- Main Styles -->
    <link rel="stylesheet" href="../static/styles/style.min.css">

    <!-- Material Design Icon -->
    <link rel="stylesheet" href="../static/fonts/material-design/css/materialdesignicons.css">

    <!-- mCustomScrollbar -->
    <link rel="stylesheet" href="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

    <!-- Waves Effect -->
    <link rel="stylesheet" href="../static/plugin/waves/waves.min.css">

    <!-- Sweet Alert -->
    <link rel="stylesheet" href="../static/plugin/sweet-alert/sweetalert.css">

    <!-- Morris Chart -->
    <link rel="stylesheet" href="../static/plugin/chart/morris/morris.css">

    <!-- FullCalendar -->
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.print.css" media='print'>

    <!-- Dark Themes -->
    <link rel="stylesheet" href="../static/styles/style-black.min.css">
</head>

<body>
<div th:replace="menu"></div>
<div th:replace="nav"></div>

<div id="wrapper">
    <div class="main-content">
        <div class="row small-spacing">
            <div class="col-xs-12">
                <div class="card">
                    <div class="card-body">
                        <form role="form" class="form-inline" id="assignForm">
                            <input type="hidden" name="uid" id="uid" th:value="${uid}"/>
                            <div class="form-group">
                                <label for="unAssignRoleList">未分配角色列表</label><br>
                                <select class="form-control" id="unAssignRoleList" name="rids" multiple size="10"
                                        style="width:100px;overflow-y:auto;">
                                </select>
                            </div>
                            <div class="form-group">
                                <ul>
                                    <button type="button" id="btnRight">
                                        <span class="mdi mdi-chevron-double-right"></span>
                                    </button>
                                    <br>
                                    <button type="button" id="btnLeft" style="margin-top:20px;">
                                        <span class="mdi mdi-chevron-double-left"></span>
                                    </button>
                                </ul>
                            </div>
                            <div class="form-group" style="margin-left:40px;">
                                <label for="assignRoleList">已分配角色列表</label><br>
                                <select class="form-control" id="assignRoleList" name="rids2" multiple size="10"
                                        style="width:100px;overflow-y:auto;">
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- /.box-content -->
            </div>
        </div>
    </div>
</div><!--/#wrapper -->
<script src="../static/scripts/html5shiv.min.js"></script>
<script src="../static/scripts/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../static/scripts/jquery.min.js"></script>
<script src="../static/layer/layer.js"></script>
<script src="../static/scripts/modernizr.min.js"></script>
<script src="../static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../static/plugin/nprogress/nprogress.js"></script>
<script src="../static/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="../static/plugin/waves/waves.min.js"></script>

<!-- Responsive Table -->
<script src="../static/plugin/RWD-table-pattern/js/rwd-table.min.js"></script>
<script src="../static/scripts/rwd.demo.min.js"></script>


<script src="../static/scripts/main.min.js"></script>
<script type="text/javascript">
    $(function () {
        layer.msg("加载中", {time: 200, icon: 16, shift: 5}, function () {
            show();
            // 增加角色
            $("#btnRight").click(function () {
                $.ajax({
                    url: "/manage/giveRole",
                    type: "post",
                    data: $("#assignForm").serialize(),
                    success: function (obj) {
                        if (obj.result) {
                            layer.msg("分配角色成功", {time: 1000, icon: 6, shift: 6}, function () {
                                show();
                            })
                        } else {
                            layer.msg("分配角色失败", {time: 1000, icon: 5, shift: 6}, function () {
                            })
                        }
                    }
                })
            });
            // 删除角色
            $("#btnLeft").click(function () {
                $.ajax({
                    url: "/manage/recycleRole",
                    type: "post",
                    data: $("#assignForm").serialize(),
                    success: function (obj) {
                        if (obj.result) {
                            layer.msg("删除角色成功", {time: 1000, icon: 6, shift: 6}, function () {
                                show();
                            })
                        } else {
                            layer.msg("删除角色失败", {time: 1000, icon: 5, shift: 6}, function () {
                            })
                        }
                    }
                })
            });
        });//layer
    });//入口

    function show() {
        $.ajax({
            url: "/manage/roleIndex",
            type: "post",
            data: $("#assignForm").serialize(),
            dataType: "json",
            success: function (obj) {
                if (obj.result) {
                    let unAssignRoleHtml = "";
                    $.each(obj.unassignRoleList, function (index, unAssignRole) {
                        unAssignRoleHtml += "<option value=" + unAssignRole.rid + ">" + unAssignRole.rname + "</option>";
                    });
                    $("#unAssignRoleList").html(unAssignRoleHtml);
                    let assignRoleHtml = "";
                    $.each(obj.assignRoleList, function (index, assignRole) {
                        assignRoleHtml += "<option value=" + assignRole.rid + ">" + assignRole.rname + "</option>";
                    });
                    $("#assignRoleList").html(assignRoleHtml);
                } else {
                    layer.msg("查询失败", {time: 2000, icon: 5, shift: 6}, function () {
                    })
                }
            }
        })
    }

</script>
</body>
</html>